import React from 'react'
import {
  Form,
  Select,
  Button,
  Table,
  DatePicker,
  Pagination,
  Modal,
  Input
} from 'antd'
import { connect } from 'react-redux'
import moment from 'moment'
import _ from 'lodash'
import {
  histaskFindBypageApi,
  projectFindBypageApi,
  histaskFindFileByHisTaskIdApi
} from '../../api/ajax'

const FormItem = Form.Item
const Option = Select.Option

class HistoryRecord extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      totalRecord: 0,
      tableSource: [],
      projectSource: [],
      fileSource: [],
      currentPage: 1,
      pageNum: 1,
      pageSize: 5,
      rangeDate: null,
      problemType: null,
      branch: null,
      projectId: '',
      startDate: '',
      endDate: '',
      visible: false
    }
  }

  componentDidMount() {
    this.loadData()
    projectFindBypageApi().then(v => {
      this.setState({
        projectSource: _.isNil(v.list.results) ? [] : v.list.results
      })
    })
  }

  loadData = (pageNum = 1) => {
    let {
      pageSize,
      startDate,
      endDate,
      projectId,
      problemType,
      branch
    } = this.state
    this.setState({ currentPage: pageNum, pageNum })
    if (_.isEmpty(startDate)) startDate = moment('1950-01-01')
    if (_.isEmpty(endDate)) endDate = moment('9999-12-01')
    histaskFindBypageApi({
      pageNum,
      pageSize,
      startDate,
      projectId,
      endDate,
      problemType,
      branch
    }).then(v => {
      const {
        list: { totalRecord, results }
      } = v
      this.setState({
        totalRecord,
        tableSource: _.isNil(results) ? [] : results
      })
    })
  }
  render() {
    const {
      totalRecord,
      pageSize,
      currentPage,
      projectId,
      projectSource,
      rangeDate,
      tableSource,
      visible,
      fileSource,
      problemType,
      branch
    } = this.state
    const proType = ['正常', '源端故障', '目标端故障']
    return (
      <div className="home">
        <div className="home-head">
          <Form layout="inline">
            <FormItem label="项目名称">
              <Select
                placeholder="请选择"
                value={projectId}
                onChange={v => {
                  this.setState({ projectId: v })
                }}
                style={{ width: 170 }}
              >
                {projectSource.map(v => (
                  <Option key={v.id} value={v.id}>
                    {v.projectName}
                  </Option>
                ))}
              </Select>
            </FormItem>
            <FormItem label="项目单位">
              <Input
                value={branch}
                onChange={v => {
                  this.setState({ branch: v.target.value })
                }}
              />
            </FormItem>
            <FormItem label="传输状态">
              <Select
                placeholder="请选择"
                value={problemType}
                onChange={v => {
                  this.setState({ problemType: v })
                }}
                style={{ width: 170 }}
              >
                {proType.map((v, k) => (
                  <Option key={k} value={k}>
                    {v}
                  </Option>
                ))}
              </Select>
            </FormItem>
            <FormItem label="起止时间">
              <DatePicker.RangePicker
                value={rangeDate}
                onChange={v => {
                  this.setState({
                    startDate: v[0],
                    endDate: v[1],
                    rangeDate: v
                  })
                }}
              />
            </FormItem>
            <Button
              type="primary"
              style={{ marginRight: '10px' }}
              onClick={() => this.loadData()}
            >
              查询
            </Button>
            <Button
              onClick={() => {
                this.setState(
                  {
                    startDate: '',
                    projectId: '',
                    endDate: '',
                    rangeDate: null,
                    problemType: null,
                    branch: ''
                  },
                  () => this.loadData(1)
                )
              }}
            >
              重置
            </Button>
          </Form>
        </div>
        <div>
          <Table
            scroll={{ x: 1200 }}
            dataSource={tableSource}
            columns={[
              {
                title: '任务编号',
                dataIndex: 'taskCode',
                width: 150
              },
              {
                title: '项目名称',
                dataIndex: 'projectName'
              },
              {
                title: '项目单位',
                dataIndex: 'branch'
              },
              {
                title: '文件传输方式',
                dataIndex: 'pushType',
                render: text => <span>{text === 1 ? '同步' : 'FTP'}</span>
              },
              {
                title: '任务开始时间',
                dataIndex: 'startDate',
                render: text => (
                  <span>
                    {text && moment(text).format('YYYY-MM-DD hh:mm:ss')}
                  </span>
                )
              },
              {
                title: '任务结束时间',
                dataIndex: 'endDate',
                render: text => (
                  <span>
                    {text && moment(text).format('YYYY-MM-DD hh:mm:ss')}
                  </span>
                )
              },
              {
                title: '传输状态',
                dataIndex: 'problemType',
                render: text => <span>{proType[text]}</span>
              },
              {
                title: '传输文件数',
                dataIndex: 'fileNum',
                render: (text, record) => (
                  <span>
                    {text}
                    <button
                      className="button-a"
                      onClick={() => {
                        histaskFindFileByHisTaskIdApi({ id: record.id }).then(
                          v => {
                            this.setState({ fileSource: v.list, visible: true })
                          }
                        )
                      }}
                    >
                      查看
                    </button>
                  </span>
                )
              }
            ]}
            rowKey={'id'}
            pagination={false}
          />
          <div className="home-body-page">
            <Pagination
              total={totalRecord}
              pageSize={pageSize}
              current={currentPage}
              onChange={pageNum => {
                this.setState({ pageNum, currentPage: pageNum })
                this.loadData(pageNum)
              }}
              showTotal={total => `共${total}条数据`}
            />
          </div>
        </div>
        <Modal
          title="详情"
          visible={visible}
          onOk={() => {}}
          footer={null}
          onCancel={() => this.setState({ visible: false, fileSource: [] })}
        >
          {visible && (
            <Table
              dataSource={fileSource}
              rowKey={'id'}
              columns={[
                {
                  title: '文件名称',
                  dataIndex: 'fileName'
                }
              ]}
            />
          )}
        </Modal>
      </div>
    )
  }
}

export default connect(state => ({
  state
}))(HistoryRecord)
